@charset "utf-8";
@import 'reset';
$fontSize:40;
@function r($p) {
    @return $p/$fontSize*1rem;
}
html {
    font-size: $fontSize*1px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body{
    font-size: 16px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.webWarp{
    height: 100%;
    overflow: auto;
}
.web {
    width: r(640);
   
    header {
        .nav {
            width: r(640);
            height: r(75);
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: space-around;
            border-bottom: 1px solid #E5E5E5;
            li {
                position: relative;
                width: r(113);
                display: flex;
                align-items: center;
                justify-content: center;
            }
            li::after {
                position: absolute;
                left: 0;
                bottom: - r(19);
                content: "";
                width: 100%;
                height: r(3);
                background: #000000;
                display: none;
            }
            li:hover::after {
                display: block;
            }
            .active::after{
                display: block;
            }
            a {
                display: flex;
                align-items: center;
            }
            img {
                height: r(37);
            }
        }
        
    }
    .container{
        width: r(640);
        .nav_btn{
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: r(28);
            position: relative;
        
            ul{
                display: flex;
                justify-content: space-between;
                margin: 0 auto;
                border: 1px solid #E5E5E5;
                border-radius: r(6);
                overflow: hidden;
                li{
                    width: r(100);
                    height: r(38);
                    text-align: center;
                    line-height: r(38);
                    border:1px solid #E5E5E5;
                    font-size: r(21) ;
                    color: #a3a3a3;
                }
                .active{
                    border: 1px solid #878787;
                    border-right:none ;
                    background: #A6A6A6;
                    color: #FFFFFF;
                }
            }
            .screen{
                position:absolute ;
                height: r(24);
                right: r(50);
                img{
                    height: r(24);
                }
            }
        }
        .message{
            width: r(530);
            display: flex;
            margin: r(30) auto 0;
            justify-content: space-between;
            align-items: center;
            .plus_btn{
                img{
                    width: r(25);
                }
            }
            .label{
                text-align: center;
                >img{
                    width: r(60);
                    
                }
                p{
                    font-size: r(19);
                    margin-bottom: r(20);
                    margin-top: r(15);
                    img{
                        width: r(14);
                    }
                }
                ul{
                    display: flex;
                    justify-content: space-between;
                    width: r(196);
                    li{
                        width: r(57);
                        height: r(30);
                        line-height:r(30);
                        border: 1px solid #E5E5E5;
                        border-radius: r(10);
                        font-size: r(19);
                    }
                }
                
            }
            .share_btn{
                position: relative;
                padding-right: r(30);
                img{
                    width: r(24);
                }
                #slip{
                    display: none;
                }
                #slip:checked+.share_slip{
                    transform:translate(0) scale(1) ;
                }
                .share_slip{
                    width:r(70);
                    height: r(400);
                    background: #F2F2F2;
                    position: absolute;
                    top: 0;
                    left: r(40);
                    transform: translate(-20px) scale(0) ;
                    transform-origin: left top;
                    transition: all .4s;
                    ul:before{
                        position: absolute;
                        top: r(6);
                        left:- r(9);
                        content:"" ;
                        border-top:r(10)solid transparent ;                        
                        border-bottom:r(10)solid transparent;                        
                        border-right: r(10)solid #F2F2F2;                        
                    }
                    ul{
                        li{
                            margin-top: r(50) ;  
                            a{
                                margin: 0 auto;
                                display: block;
                                width:r(60);
                                color:#767777;
                                text-align: center;
                            }
                            img{
                                width: r(30);
                                text-align: center;
                                
                            }
                            p{
                                width:r(60);
                                font-size: r(15);
                                text-align: center;
                            }
                        }
                    }
                }
            }
            
        }
        .text{
                width: r(550);
//              height: r(100);
                overflow: hidden;
                margin:  r(23) auto;
                p{
                    font-size: r(21);
                    line-height: r(35);
                }
            }
            .images{
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                .img_size{
                    width: r(212);
                    height: r(212);
                    overflow: hidden;
                    margin-bottom: r(1);
                    line-height:r(212);
                    img{
                        width: 100%;
                        vertical-align: middle;
                    }
                }
            }
            .state{
                width: r(640);
                height: r(25);
                margin: r(30) auto 0;
                display: flex;
                justify-content:space-around;
                align-items: center;
                font-size: r(17);
                color: #b8b8b8;
                padding-bottom: r(30);
                border-bottom: 1px solid #e5e3de;
                .state_lf{
                    display: flex;
                    justify-content:space-between;
                    align-items: center; 
                    p{
                        line-height:r(25) ;
                        vertical-align: middle;
                        margin-right: r(33);
                        img{
                            vertical-align: middle;
                            height: r(20);
                        }
                        span{
                            margin-left: r(8);
                            vertical-align: middle;
                            color: #b8b8b8;
                        }
                    } 
                }
                .state_rg{
                    display: flex;
                    justify-content:space-between;
                    align-items: center;
                    
                    ul{
                        display: flex;
                        justify-content: space-between;
                        margin-right: r(10);
                        li{
                            width: r(10);
                            height: r(10);
                            border:1px solid #bfbfbf;
                            border-radius: 50%;
                            margin-left: r(3);
                        }
                    }
                    p{
                        line-height:r(25);
                        vertical-align: middle;
                        margin-left: r(32);
                        img{
                            vertical-align: middle;
                            height: r(24);
                        }
                        span{
                            margin-right: r(8);
                            vertical-align: middle;
                            color: #b8b8b8;
                        }
                    } 
                }
            }
            .m_images{
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                margin-top: r(34);
                .m_img_size{
                    width: r(319);
                    height: r(400);
                    overflow: hidden;
                    margin-bottom: r(1);
                    line-height:r(212);
                        img{
                            height: 100%;
                            vertical-align: middle;
                        }
                }
            }
            .player{
                width: r(640);
                .img{
                    width: r(304);
                    height: r(304);
                    margin: r(33) auto;
                    text-align: center;
                    background: url(../img/cp.png) no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    position: relative;
                    >img{
                        position: absolute;
                        top: r(16);
                        right:- r(37);
                        width: r(122);
                    }
                }
                .img_head{
                    width: r(141);
                    height: r(141);
                    overflow: hidden;
                    border-radius: 50%;
                    position: relative;
                    >img{
                        width: 100%;
                    }
                    .play_btn{
                        width: r(61);
                        height: r(79);
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                        
                        >img{
                           height: 100%; 
                        }
                    }
                } 
                >p{
                    font-size: r(27);
                    text-align: center;
                }
                .bar{
                    width: r(400);
                    margin: r(29) auto r(37);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    overflow: hidden;
                    img{
                        width: r(300);
                        padding-left: r(30);
                    }
                    span{
                        font-size: r(21);
                        margin-left: r(10);
                    }
                }
            }
            .b_images{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                    margin-top: r(30);
                    margin-bottom: r(45);
                    .b_img{
                        width:r(380);
                        height: r(500);
                        overflow: hidden;
                        img{
                            width: 100%;
                        }
                    }
                }
                .l_img{
                    width: r(640);
                    height: r(500);
                    display: flex;
                    justify-content: center;
                    margin-bottom: 24px;
                    img{
                        height: 100%;
                    }
                }
                .video_img{
                    width: r(640);
                    height: r(360);
                    overflow: hidden;
                    position: relative;
                    img{
                        height: 100%;
                    }
                    .paly_btn_wrap{
                        width: r(120);
                        height: r(120);
                        border: 1px solid #FFFFFF;
                        border-radius: 50%;
                        position: absolute;
                        top: 50%;
                        left:50%;
                        transform: translate(-50%,-50%);
                       .play_btn{
                           position: absolute;
                           top: 52%;
                           left:50%;
                           transform: translate(-35%,-50%);
                           img{
                               height: r(61);
                           }
                       } 
                    }
                }
            .foot_state{
                width: r(640);
                height: r(25);
                margin: r(40) auto 0;
                display: flex;
                justify-content:space-around;
                align-items: center;
                font-size: r(17);
                color: #b8b8b8;
                padding-bottom: r(200);
                .state_lf{
                    display: flex;
                    justify-content:space-between;
                    align-items: center; 
                    p{
                        line-height:r(25) ;
                        vertical-align: middle;
                        margin-right: r(33);
                        img{
                            vertical-align: middle;
                            height: r(20);
                        }
                        span{
                            margin-left: r(8);
                            vertical-align: middle;
                            color: #b8b8b8;
                        }
                    } 
                }
                .state_rg{
                    display: flex;
                    justify-content:space-between;
                    align-items: center;
                    
                    ul{
                        display: flex;
                        justify-content: space-between;
                        margin-right: r(10);
                        li{
                            width: r(10);
                            height: r(10);
                            border:1px solid #bfbfbf;
                            border-radius: 50%;
                            margin-left: r(3);
                        }
                    }
                    p{
                        line-height:r(25);
                        vertical-align: middle;
                        margin-left: r(32);
                        img{
                            vertical-align: middle;
                            height: r(24);
                        }
                        span{
                            margin-right: r(8);
                            vertical-align: middle;
                            color: #b8b8b8;
                        }
                    } 
                }
            }
        
    }
}
#elastic{
        display: none;
    }
    #elastic:checked+.elastic_b{
        display: block;
    }
    #elastic:checked+.elastic_b>ul{
        transform: translateY(0);
    }
    .elastic_b{
        width: 100%;
        height: 100%;
        background: rgba(000,000,000,.5);
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        ul{
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            background: #FFFFFF;
            transition: all .3s;
            transform: translateY(100%);
            li{
               width: 100%; 
               height: r(80);
               font-size: r(26);
               text-align: center;
               line-height: r(80);
               border-bottom:1px solid #dcdcdc ;
               color: #343434;
            }
            .cencel{
                color: #a3a3a3;
                border: none;
            }
        }
    }
